<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    title="组分汽油全检"
    :visible.sync="dialogVisible"
    :append-to-body="true"
  >
    <div id="exportBox" class="base-wrapper">
      <header>
        <div class="company">
          <div class="image" align="center">
            <img
              src=""
            />
            <!-- 图片 -->
          </div>
        </div>
        <h2 style="font-size: 48pt; font-family: 隶书; text-align: center">检验报告</h2>
      </header>
      <div class="main">
        <p style="margin: 20pt; text-align: left; widows: 0">
          <span style="font-family: 宋体; font-size: 12pt">项目名称:</span>
        </p>
        <p style="margin: 20pt; text-align: left; widows: 0">
          <span style="font-family: 宋体; font-size: 12pt">委托单位:</span>
        </p>
        <p style="margin: 20pt; text-align: left; widows: 0">
          <span style="font-family: 宋体; font-size: 12pt">检验类别:</span>
        </p>
        <div>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <p style="text-align: center; widows: 0">
          <span
            style="font-family: 隶书; font-size: 16pt; font-weight: bold"
          >河 南 中 油 豫 博 检 测 技 术 有 限 公 司</span>
        </p>
        <div>
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <p style="margin-top: 50pt; text-align: center; widows: 0">
          <span style="font-family: Calibri; font-size: 14pt">&#xa0;</span>
        </p>
        <p style="margin: 0pt; text-align: center; widows: 0">
          <span style="font-family: 隶书; font-size: 19pt; font-weight: bold">注意事项</span>
        </p>
        <p style="margin: 15pt; text-align: left; widows: 0">
          <span
            style="font-family: 隶书; font-size: 14pt; font-weight: bold"
          >1. 报告无我单位“检验专用章”，或无编制、审核、批准人签字无效。</span>
        </p>
        <p style="margin: 15pt; text-align: left; widows: 0">
          <span
            style="font-family: 隶书; font-size: 14pt; font-weight: bold"
          >2. 报告复印件未重新加盖我单位“检验专用章”，或有任何涂改无效。</span>
        </p>
        <p style="margin: 15pt; text-align: left; widows: 0">
          <span style="font-family: 隶书; font-size: 14pt; font-weight: bold">
            3.
            除委托抽样检验外，本检验机构不对委托方送检样品的真实性负责，所提供的检验数据仅表征送检样品的质量状态。
          </span>
        </p>
        <p style="margin: 15pt; text-align: left; widows: 0">
          <span style="font-family: 隶书; font-size: 14pt; font-weight: bold">
            4.
            检验结果仅对来样负责。未经检验机构同意，委托人不得擅自使用检验结果进行不当宣传。
          </span>
        </p>
        <p style="margin: 15pt; text-align: left; widows: 0">
          <span style="font-family: 隶书; font-size: 14pt; font-weight: bold">
            5.
            对本报告若有异议，请于收到检验报告之日起十五日内，向我单位或上级主管部门提出，逾期不予受理。
          </span>
        </p>
        <p style="margin: 15pt; text-align: left; widows: 0">
          <span style="font-family: 隶书; font-size: 14pt; font-weight: bold">
            6.
            收到本报告30日内,可凭我单位委托检验协议书领取样品,否则,按我单位规定予以处理。
          </span>
        </p>
        <div>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <p style="margin: 0pt; text-align: left; widows: 0">
          <span style="font-family: 隶书; font-size: 14pt; font-weight: bold">
            地 址：郑州市惠济区江山路中石油广武油库
            <br />联系电话：0371-61657883
            <br />电子邮箱：henzhijian@126.com
            <br />
          </span>
        </p>
        <div>
          <br />
          <br />
          <br />
        </div>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 16pt; font-weight: bold">1 概述</span>
        </p>
        <p style="margin: 5pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">
            受中石油河南销售
            <span style="color: red">郑州分公司</span>委托，
            <span style="color: red">2022年04月15日</span>，河南中油豫博检测技术有限公司对郑州
            <span style="color: red">公司第二加油站油气回收系统密闭点油气泄漏及边界无组织排放非甲烷总烃</span>进行了检测。
          </span>
        </p>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 16pt; font-weight: bold">2 检测内容</span>
        </p>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">2.1油气回收系统密闭点油气泄漏</span>
        </p>
        <p style="margin: 20pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">油气回收系统密闭点油气泄漏检测内容见表2-1</span>
        </p>
        <p style="margin: 20pt; text-align: center; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">表2-1 油气回收系统密闭点油气泄漏检测内容</span>
        </p>
        <table
          class="MsoNormalTable"
          border="1"
          cellspacing="0"
          style="border-collapse: collapse; width: 470pt"
        >
          <tr style="height: 31.5pt">
            <td width="108">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测点位</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测项目</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测频次</span>
              </p>
            </td>
          </tr>
          <tr style="height: 31.5pt">
            <td align="center" width="33.3%">
              <span style="font-family: 宋体; font-size: 10.5pt">油气回收系统密闭点位</span>
            </td>
            <td align="center" width="33.3%">
              <span style="font-family: 宋体; font-size: 10.5pt">油气泄漏</span>
            </td>
            <td align="center" width="33.3%">
              <span style="font-family: 宋体; font-size: 10.5pt">每个点位1次，共1天</span>
            </td>
          </tr>
        </table>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">2.2边界无组织排放非甲烷总烃检测</span>
        </p>
        <p style="margin: 20pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt;d">边界无组织排放非甲烷总烃检测内容见表2-1</span>
        </p>
        <p style="margin: 20pt; text-align: center; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">表2-2边界无组织排放非甲烷总烃检测内容</span>
        </p>
        <table
          class="MsoNormalTable"
          border="1"
          cellspacing="0"
          style="border-collapse: collapse; width: 470pt"
        >
          <tr style="height: 31.5pt">
            <td width="108">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测点位</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测项目</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测频次</span>
              </p>
            </td>
          </tr>
          <tr style="height: 31.5pt">
            <td align="center" width="33.3%">
              <span
                style="font-family: 宋体; font-size: 10.5pt; text-align: center"
              >在厂界外上风向设置1个参照点，在厂界外下风向最高浓度范围内设置4个监控点</span>
            </td>
            <td align="center" width="33.3%">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">非甲烷总烃</span>
            </td>
            <td align="center" width="33.3%">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">4次/天，共1天</span>
            </td>
          </tr>
        </table>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">3 检测分析方法及使用仪器</span>
        </p>
        <p style="margin: 20pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">本次检测中，样品采集及分析均采用国家标准方法。检测分析方法及使用仪器见表3-1。</span>
        </p>
        <p style="margin: 20pt; text-align: center; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">表3-1 检测分析方法一览表</span>
        </p>
        <table
          class="MsoNormalTable"
          border="1"
          cellspacing="0"
          style="border-collapse: collapse; width: 470pt"
        >
          <tr style="height: 31.5pt">
            <td width="108">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测项目</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测分析方法</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">方法来源</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">使用仪器</span>
              </p>
            </td>
            <td>
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检出限</span>
              </p>
            </td>
          </tr>
          <tr style="height: 31.5pt">
            <td align="center" width="20%">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">油气泄漏</span>
            </td>
            <td align="center" width="20%">
              <span
                style="font-family: 宋体; font-size: 10.5pt; text-align: center"
              >泄漏和敞开液面排放的挥发性有机物 检测技术导则</span>
            </td>
            <td align="center" width="20%">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">HJ 733-2014</span>
            </td>
            <td align="center" width="20%">
              <span
                style="font-family: 宋体; font-size: 10.5pt; text-align: center"
              >便携式VOCs检测仪（VOC-3000）ZYYB-JCSB-080</span>
            </td>
            <td align="center" width="20%">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">0.2vmol/mol</span>
            </td>
          </tr>
        </table>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">4 检测分析结果</span>
        </p>
        <p style="margin: 5pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">检测结果见表4-1、4-2</span>
        </p>
        <p style="margin: 5pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">表4-1油气回收系统密闭点油气泄漏检测结果</span>
        </p>
        <p style="margin: 15pt; text-align: center">
          <span
            style="font-family: 宋体; font-size: 16pt; font-weight: bold"
          >挥发性有机物（VOCs）检测原始记录(泄漏源检测)</span>
        </p>
        <table
          class="MsoNormalTable"
          border="1"
          cellspacing="0"
          style="border-collapse: collapse; width: 470pt"
        >
          <tr style="height: 31.5pt">
            <td width="50">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">序号</span>
              </p>
            </td>
            <td width="100">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">区域</span>
              </p>
            </td>
            <td width="100">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">设备或管线名称</span>
              </p>
            </td>
            <td width="100">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">名称</span>
              </p>
            </td>
            <td width="150">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">群组位置/工艺描述</span>
              </p>
            </td>
            <td width="60">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测值 μ mol/mol</span>
              </p>
            </td>
            <td width="60">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">泄漏限值 μ mol/mol</span>
              </p>
            </td>
            <td width="60">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">是否泄漏</span>
              </p>
            </td>
          </tr>
          <tr style="height: 31.5pt">
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">1</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">加油机</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">1号油枪</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">集气罩</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">集气罩</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">12.4</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">≤500</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">否</span>
            </td>
          </tr>
        </table>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">
            依据GB 20952-2020
            《加油站大气污染物排放标准》，本次共检测461个密封点，各密闭点检测结果均未超出泄漏限值。
          </span>
        </p>
        <p style="margin: 5pt; text-align: center">
          <span style="font-family: 宋体; font-size: 14pt; font-weight: bold">表4-2边界无组织排放非甲烷总烃检测结果</span>
        </p>
        <table
          class="MsoNormalTable"
          border="1"
          cellspacing="0"
          style="border-collapse: collapse; width: 470pt"
        >
          <tr style="height: 31.5pt">
            <td width="108" rowspan="2">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">检测点位</span>
              </p>
            </td>
            <td width="108" rowspan="2">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">采样日期</span>
              </p>
            </td>
            <td width="108" rowspan="2">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">采样时间</span>
              </p>
            </td>
            <td width="108" rowspan="2">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">非甲烷总烃（mg/m3）</span>
              </p>
            </td>
            <td colspan="3">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">气象参数</span>
              </p>
            </td>
          </tr>
          <tr style="height: 31.5pt">
            <td width="108">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">气温</span>
              </p>
            </td>
            <td width="108">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">气压</span>
              </p>
            </td>
            <td width="108">
              <p align="center" style="text-align: center">
                <span style="font-family: 宋体; font-size: 10.5pt">风向风速（m/s）</span>
              </p>
            </td>
          </tr>
          <tr style="height: 31.5pt">
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">厂界上风向1#</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">2022.04.15</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">12：45</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">1.64</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">22.0</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">100.4</span>
            </td>
            <td align="center">
              <span style="font-family: 宋体; font-size: 10.5pt; text-align: center">1.1</span>
            </td>
          </tr>
        </table>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">
            依据GB
            20952-2020《加油站大气污染物排放标准》，本次共检测5个采集点的环境空气样品，边界无组织排放非甲烷总烃未超出排放限值。
          </span>
        </p>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 16pt; font-weight: bold">5 检测质量保证和质量控制</span>
        </p>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span
            style="font-family: 宋体; font-size: 14pt"
          >本次检测严格按照环境监测技术规范中制定的质控措施执行，检测分析方法采用国家颁布的标准分析方法，检测仪器经过计量部门检定合格并在有效期内。具体质控要求如下：</span>
        </p>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">5.1合理布设检测点位，保证各检测点位布设的科学性和可比性。</span>
        </p>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">5.2被测排放物的浓度在仪器量程的有效范围内。</span>
        </p>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">5.3非甲烷总烃做全程序空白，样品常温避光保存，做10%平行样。</span>
        </p>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">5.4本项目所有检测人员均持证上岗。</span>
        </p>
        <p style="margin: 10pt; text-align: left; text-indent: 28pt">
          <span style="font-family: 宋体; font-size: 14pt">5.5检测数据严格实行三级审核制度。</span>
        </p>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 16pt; font-weight: bold">6 检测人员</span>
        </p>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 14pt">编制人： 夏静</span>
          <span style="font-family: 宋体; font-size: 14pt; margin-left: 80pt">审 核：乔琨朔</span>
          <span style="font-family: 宋体; font-size: 14pt; margin-left: 80pt">批准：赵海洋</span>
        </p>
        <p style="margin: 10pt; text-align: left">
          <span style="font-family: 宋体; font-size: 14pt">河南中油豫博检测技术有限公司</span>
        </p>
        <p style="margin-left: 300pt; text-align: left">
          <span style="font-family: 宋体; font-size: 14pt">（加盖检测检验专用章）</span>
        </p>
        <div>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <p style="margin: 0pt; text-align: center">
          <span style="font-family: 宋体; font-size: 16pt; font-weight: bold">附件 检测点位图</span>
        </p>
      </div>
    </div>
    <div>
      <el-button type="primary" @click="exportWrod">导出</el-button>
    </div>
  </el-dialog>
</template>
<script>
import htmlDocx from "html-docx-js/dist/html-docx";
import saverFile from "file-saver";
export default {
  name: "AmbientGas",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    reportData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  // 监听父页面状态
  watch: {
    value: function() {
      this.dialogVisible = this.value;
      if (this.value) {
        this.init();
      }
    },
  },
  created() { },
  methods: {
    init() { },
    exportWrod() {
      const htmls = document.getElementById("exportBox"); // 获取需要导出的标签
      this.allDomObj = htmls.cloneNode(true);
      this.loadTable(); // 处理表单
      this.exec(this.allDomObj.innerHTML.toString()); // 导出的方法
    },
    loadTable() {
      // 获取页面上的table
      const tableList = this.allDomObj.getElementsByClassName("el-table");
      for (let i = 0; i < tableList.length; i++) {
        var item = tableList[i];
        const header = item.getElementsByClassName("el-table__header");
        header[0].style.width = "800px";
        var headerTr = header[0].getElementsByTagName("tr"); // 获取到header 的tr标签

        const body = item.getElementsByClassName("el-table__body");
        body[0].style.width = "800px";

        var tbody = body[0].getElementsByTagName("tbody");

        tbody[0].insertBefore(headerTr[0], tbody[0].firstElementChild); // header的tr标签放到body的第一个子节点上
      }
    },
    exec(htmls) {
      const page =
        `<!DOCTYPE html>
              <html lang="en">
                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width,initial-scale=1.0">
                  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
                  <title><%= htmlWebpackPlugin.options.title %></title>
                </head>
                <body>
                  <div id="app"> ` +
        htmls +
        ` </div>
                </body>
            </html>
            `;
      const converted = htmlDocx.asBlob(page);
      saverFile(converted, "test.docx");
    },
  },
};
</script>
<style lang="scss" scoped>
.base-wrapper {
  text-align: center;
}
header {
  width: 500px;
  margin: 40px auto 20px;
  .company {
    .image {
      width: 100%;
      vertical-align: middle;
      img {
        width: 80px;
      }
    }
    .image,
    h1 {
      display: inline-block;
    }
    h1 {
      font-weight: bolder;
      font-size: 18px;
    }
  }
}
p.MsoNormal {
  mso-style-name: 正文;
  mso-style-parent: "";
  margin: 0pt;
  margin-bottom: 0.0001pt;
  mso-pagination: none;
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: 等线;
  mso-bidi-font-family: "Times New Roman";
  font-size: 10.5pt;
  mso-font-kerning: 1pt;
}

table.MsoNormalTable {
  mso-style-name: 普通表格;
  mso-style-parent: "";
  mso-style-noshow: yes;
  mso-tstyle-rowband-size: 0;
  mso-tstyle-colband-size: 0;
  mso-para-margin: 0pt;
  mso-para-margin-bottom: 0.0001pt;
  mso-pagination: widow-orphan;
  font-family: "Times New Roman";
  font-size: 10pt;
  mso-ansi-language: #0400;
  mso-fareast-language: #0400;
  mso-bidi-language: #0400;
  margin: 0 auto;
}
</style>
